<template>
    <div class="component">
        <!--面包屑导航-->
        <Breadcrumb :menulist="[`${componentType == 1 ? '项目' : '产品'}`, '枚举', '枚举项']" :showSystem="false" showBack></Breadcrumb>

        <!--table-->
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="tabHeader" style="justify-content: flex-end">
                <p class="tit" style="margin-right: auto;">枚举项</p>
                <el-button type="primary" icon="el-icon-plus" @click="openAdd">添加枚举项</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="addItems">批量添加枚举项</el-button>
            </div>

            <el-table stripe :data="list.list" current-row-key="formPartId" style="width: 100%">
                <!--<el-table-column label="ID" prop="enumItemId"></el-table-column>-->
                <el-table-column label="枚举项编码" prop="enumItemCode"></el-table-column>
                <el-table-column label="枚举项名称" prop="enumItemName"></el-table-column>
                <el-table-column label="是否生效" prop="isEffective" :formatter="formatter"></el-table-column>
                <el-table-column label="生效开始时间" prop="effectiveFrom"></el-table-column>
                <el-table-column label="生效结束时间" prop="effectiveTo"></el-table-column>
                <!--<el-table-column label="是否系统" prop="isSystem" :formatter="formatter"></el-table-column>-->
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="创建用户" prop="createUserName"></el-table-column>
                <el-table-column label="修改时间" prop="modifyTime"></el-table-column>
                <el-table-column label="修改用户" prop="modifyUserName"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="openEdit(scope.row)">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @onConfirm="del(scope.row)" style="margin-left: 10px;">
                            <el-button slot="reference" size="mini" type="danger">删除</el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="slot, total, prev, pager, next, jumper"
                    :total="list.total"
                    :current-page.sync="currentPage"
                    :page-size="rows"
                    @current-change="changePage"
            >
                <el-button v-if="list.list.length>0" icon="el-icon-refresh" type="primary" style="margin-right: 10px; background: #409EFF; color:#fff" @click="getList"></el-button>
            </el-pagination>
        </el-card>

        <!--添加-->
        <el-drawer
                title="添加枚举项"
                :show-close="false"
                :with-header="false"
                :before-close="cancelForm"
                :visible.sync="showAdd"
                direction="rtl"
                ref="drawer"
        >
            <div class="drawerTitle">{{type === 1 ? '新增枚举项' : type === 2 ? '编辑枚举项' : '删除枚举项'}}</div>
            <div class="add-drawer">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <!--<el-form-item :label-width="formLabelWidth" label="枚举项ID" prop="enumItemCode" v-if="type===2">
                        <el-input v-model="form.enumItemId" autocomplete="off" :disabled="type===2"></el-input>
                    </el-form-item>-->
                    <el-form-item :label-width="formLabelWidth" label="枚举项编码" prop="enumItemCode">
                        <el-input v-model="form.enumItemCode" autocomplete="off" :disabled="type===2"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="枚举项名称" prop="enumItemName">
                        <el-input v-model="form.enumItemName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="生效开始时间">
                        <el-date-picker v-model="form.effectiveFrom" value-format="yyyy-MM-dd" type="date" placeholder="生效开始时间" :disabled="form.isEffective==0"></el-date-picker>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="生效结束时间">
                        <el-date-picker v-model="form.effectiveTo" value-format="yyyy-MM-dd" type="date" placeholder="生效结束时间" :disabled="form.isEffective==0"></el-date-picker>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属枚举">
                        <el-input v-model="form.enumDefineName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属项目" v-if="componentType==1">
                        <el-input v-model="form.solutionName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属产品">
                        <el-input v-model="form.topSolutionName" disabled></el-input>
                    </el-form-item>
                    <!--<el-form-item :label-width="formLabelWidth" label="是否系统">
                        <el-switch v-model="form.isSystem"></el-switch>
                    </el-form-item>-->
                    <el-form-item :label-width="formLabelWidth" label="是否生效">
                        <el-switch v-model="form.isEffective"></el-switch>
                    </el-form-item>
                </el-form>

                <div class="add-drawer_foot">
                    <el-button @click="cancelForm()">取 消</el-button>
                    <el-button plain icon="el-icon-delete" @click="reset()" v-if="type === 1">清除</el-button>
                    <el-button type="primary" @click="ok('ruleForm')" :loading="addLoading">{{ addLoading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>

        <!--批量添加-->
        <BatchAdd :show.sync="showBatchAdd" :enumDefineId.sync="enumDefineId" @showDialog="showDialog"></BatchAdd>
    </div>
</template>

<script>
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import BatchAdd from "@/components/BatchAddEnumsItems";
    import {request, url} from "@/api/request";

    export default {
        name: "ComponentEnumsItems",
        components: {
            Breadcrumb,
            BatchAdd
        },
        data() {
            return {
                formId:'',
                componentID:'',
                enumDefineId:'',
                list:{
                    list:[],
                },
                currentPage:1,
                rows:10,
                FormDefault:{},

                addLoading:false,
                showAdd:false,
                formLabelWidth: '110px',
                type:1,//1新增 2编辑 3删除
                form:{
                    isSystem:false,
                    isEffective:true,
                },
                rules:{
                    enumItemCode: [
                        { required: true, message: '必填', trigger: 'change' },//change
                    ],
                    enumItemName: [
                        { required: true, message: '必填', trigger: 'change' },
                    ],
                },
                showBatchAdd:false,
            };
        },
        props: {
            componentType: {
                type: Number,
                default: 1,//1组件，2产品
            },
        },
        created() {

        },
        mounted() {
            let obj = this.getLocationParams(location.href.split('?')[1]);
            console.log(obj);
            obj.enumDefineId && (this.enumDefineId = obj.enumDefineId);
            this.getList();
        },
        methods: {
            getList(){
                request(`${url.getEnumItems}/${this.enumDefineId}`,{
                    // loading:1,
                    data:{
                        currentPage:this.currentPage,
                        rows:this.rows,
                    }
                },res=>{
                    this.list = res.data;
                })
            },
            formatter(row, column, cellValue, index){
                return cellValue ? '是' : '否';
            },
            changePage(e){
                this.currentPage = e;
                this.getList();
            },
            //打开添加表单
            openAdd(){
                this.type = 1;
                this.showAdd = true;
                this.reset();
                //请求关联主模型和所属组件等
                // this.getSelectList();
                this.getDefault();
            },
            //选择关联模型的时候填充2个字段
            changeAttribute(e){
                this.modelsList.find(v=>{
                    if (v.attributeId === e) {
                        this.form.fieldCode = v.attributeCode;
                        this.form.fieldName = v.attributeName;
                        return true;
                    }
                })
            },
            openDel(row){
                //
            },
            openEdit(row){
                this.type = 2;
                this.showAdd = true;
                this.reset();
                let transBoolean = {
                    isSystem:!!row.isSystem,
                    isEffective:!!row.isEffective,
                }
                // row = this.replaceAllNumber(row);

                this.form = {
                    ...row,
                    ...transBoolean,
                }
                this.getDefault();
            },
            ok(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addLoading = true;
                        if (this.type === 1) {
                            this.add();
                        }
                        else if(this.type === 2){
                            this.edit();
                        }
                        else if(this.type === 3){
                            this.del();
                        }
                    }
                    else {
                        this.$message({
                            message:'有未完成的必填项！',
                            type:'warning',
                        })
                        return false;
                    }
                });
            },
            getSelectList(){
                request(`${url.getPartFieldModelList}/${this.formPartId}`,{},res=>{
                    this.modelsList = res.data;
                })
            },
            getDefault(){
                request(`${url.getEnumItemsDefault}/${this.enumDefineId}`,{},res=>{
                    this.form = {
                        ...this.form,
                        enumDefineName:res.data.enumDefineName,
                        solutionName:res.data.solutionName,
                        topSolutionName:res.data.topSolutionName,
                        enumDefineId:this.enumDefineId,
                        // ...res.data,
                    };
                })
            },
            cancelForm() {
                this.addLoading = false;
                this.showAdd = false;
                this.reset();
            },
            add(){
                this.form = this.replaceAllBoolean(this.form);
                console.log(this.form.enumDefineId);
                console.log(typeof this.form.enumDefineId);
                request(`${url.saveEnumItems}`,{
                    method:'POST',
                    data:{
                        ...this.form,
                        formPartId:this.formPartId,
                    },
                },res=>{
                    this.addLoading = false;
                    this.$refs.drawer.closeDrawer();
                    this.reset();
                    this.$notify.success(res.message);
                    this.getList();
                },()=>{
                    this.addLoading = false;
                })
            },
            edit(){
                this.form = this.replaceAllBoolean(this.form);
                request(`${url.saveEnumItems}/${this.form.enumItemId}`,{
                    method:'PUT',
                    data:{
                        ...this.form,
                        formPartId:this.formPartId,
                    },
                },res=>{
                    this.addLoading = false;
                    this.$refs.drawer.closeDrawer();
                    this.reset();
                    this.$notify.success(res.message);
                    this.getList();
                },()=>{
                    this.addLoading = false;
                })
            },
            del(row){
                request(`${url.saveEnumItems}/${row.enumItemId}`,{
                    method:'delete',
                },res=>{
                    // this.addLoading = false;
                    // this.$refs.drawer.closeDrawer();
                    this.reset();
                    this.$notify.success(res.message);
                    this.getList();
                },()=>{
                    this.addLoading = false;
                })
            },
            reset() {
                this.form = {
                    ...this.form,
                    isSystem:false,
                    isEffective:true,
                    enumItemCode:'',
                    enumItemName:'',
                    effectiveFrom:'',
                    effectiveTo:'',
                };
            },
            addItems(){
                this.showBatchAdd = true;
            },
            showDialog(flag){
                this.showBatchAdd = flag;
                if (flag === false) {
                    this.getList();
                }
            },
        }
    };
</script>

<style scoped>
    .add-drawer{
        padding:20px 20px 20px 15px;
    }
    .add-drawer_foot{
        text-align: center;
    }
    .drawerTitle {
        line-height: 70px;
        font-size: 20px;
        margin-left: 30px;
    }
    .tabHeader{
        display: flex;
        align-items: center;
    }
    .tit{
        font-weight: bold;
        font-size: 20px;
        display: inline;
        margin-right: 15px;
    }
    .box-card{
        margin-bottom: 15px;
    }
    .el-date-editor.el-input{
        width: 100%;
    }
</style>
